<template>
  <div>
    <div ref="embla" class="embla embla-primary">
      <div class="embla__container">
        <div class="embla__slide" v-for="(image, index) in images" :key="index">
          <q-img :src="image" @click="showPhoto(index)" :ratio="1">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-negative text-white">
                Cannot load image
              </div>
            </template>
            <template v-slot:loading>
              <div class="text-black">
                <q-spinner-ios />
                <div class="q-mt-md">Loading...</div>
              </div>
            </template>
          </q-img>
        </div>
      </div>
    </div>
    <div ref="emblaThumbs" class="embla embla--thumb">
      <div class="embla__container embla__container--thumb">
        <div class="embla__slide embla__slide--thumb sub-image" v-for="(image, index) in images" :key="'thumb-' + index" @click="scrollTo(index)">
          <q-img :src="image" :class="[active === index? 'active':'']" :ratio="1">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-negative text-white">
                Network error
              </div>
            </template>
            <template v-slot:loading>
              <div class="text-black">
                <q-spinner-bars size="1rem"/>
              </div>
            </template>
          </q-img>
        </div>
      </div>
    </div>
  </div>

  <photo-provider :downloadMethod="downloadMethod" ref="photo">
    <photo-consumer v-for="(src, index) in images" :intro="src" :key="src" :src="src">
      <div></div>
    </photo-consumer>
  </photo-provider>

</template>

<script>
import EmblaCarousel from 'embla-carousel';

export default {
  name: 'EmblaCarouselWithThumbnails',
  props: {
    images: Array
  },
  data() {
    return {
      embla: null,
      emblaThumbs: null,
      active: 0
    };
  },
  mounted() {
    this.initCarousel();
  },
  beforeUnmount() {
    this.embla.destroy();
    this.emblaThumbs.destroy();
  },
  methods: {
    showPhoto(index) {
      console.log(index)
      this.$refs.photo.index = index
      this.$refs.photo.visible = true
    },
    downloadMethod(item) {
      console.log(item);
    },
    initCarousel() {
      // 初始化主图轮播图
      this.embla = EmblaCarousel(this.$refs.embla);
      // 初始化缩略图轮播图，注意这里不需要设置 draggable: false
      this.emblaThumbs = EmblaCarousel(this.$refs.emblaThumbs, { containScroll: "keepSnaps" });

      // 当主图轮播图的选中项变化时，更新缩略图轮播图的位置
      this.embla.on('select', () => {
        // 获取当前选中的主图索引
        const selectedIndex = this.embla.selectedScrollSnap();
        this.active = selectedIndex
        // 滚动到对应的缩略图
        this.emblaThumbs.scrollTo(selectedIndex);
      });

      // 如果需要，也可以监听缩略图的点击事件来更新主图
      // 注意：这里的逻辑可能需要根据你的具体实现进行调整
      this.emblaThumbs.on('click', (index) => {
        this.embla.scrollTo(index);
      });
    },
    scrollTo(index) {
      this.active = index
      this.embla.scrollTo(index);
    },
  },
};
</script>

<style scoped lang="less">
.embla-primary{
  border: 1px solid rgba(29, 29, 29, 0.15);
  border-radius: 10px;
}
.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  position: relative;
  flex: 0 0 100%;
}

.embla--thumb {
  margin-top: 10px;
}

.embla__container--thumb {
  cursor: pointer;
}
.embla__slide--thumb {
  flex: 0 0 auto;
  width: 80px;
  margin-right: 10px;
}
:deep(.sub-image){
  img{
    border: 1px solid white !important;
    border-radius: 10px !important;
    opacity: 0.5;
    &:hover{
      border: 1px solid rgba(29, 29, 29, 0.15) !important;
      border-radius: 10px !important;
      opacity: 1;
    }
  }
}
:deep(.active){
  img{
    border: 1px solid rgba(29, 29, 29, 0.15) !important;
    border-radius: 10px !important;
    opacity: 1;
  }
}

</style>